<script setup>
import {getPostpone} from "@/api/project";
import {computed, onActivated, ref} from "vue";
import {toast} from "@/hook/toast";
import {generateProject} from "@/hook/project";
import {delay} from "@/utils";
import ListVue from '@/components/project-list'

const loading = ref(false)

const pagination = ref({
  page: 1,
  hasMore: true,
  isEmpty: false,
})

const projectList = ref([])

async function initData() {
  const {page, hasMore} = pagination.value
  if (!hasMore) return
  loading.value = true
  const resp = await getPostpone({page})
  await delay(300)
  const {code, data, msg} = resp
  if (code !== 1) {
    loading.value = false
    return toast({title: msg, type: 'error'})
  }
  const {data: list, total, current_page, per_page} = data
  if (!!list && list.length) {
    projectList.value.push(...generateProject(list))
  }
  const more = current_page * per_page < total
  pagination.value.hasMore = more
  if (more) {
    pagination.value.page += 1
  }
  pagination.value.isEmpty = projectList.value.length === 0
  loading.value = false
}

const disabled = computed(() => loading.value || !pagination.value.hasMore)
const load = async () => {
  await initData()
}
</script>

<template>
  <div class="card_wrap postpone-notice scroll_wrap"
       v-loading="loading"
       v-infinite-scroll="load"
       :infinite-scroll-disabled="disabled"
  >
    <list-vue :list="projectList"/>
    <div class="no-more" v-if="!pagination.hasMore">
      <span>没有更多了...</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.postpone-notice {
  overflow-y: scroll;
  .no-more {
    text-align: center;
    padding: 16px;
    font-size: 14px;
    color: #909399;
  }

}
</style>
